<template>
    <gui-page ref="guiPage" :customHeader="true">
        <template v-slot:gHeader>
            <nav-bar-custom left-icon="left" :title="$t('navigationBar.changePassword')"></nav-bar-custom>
        </template>
        <template v-slot:gBody>
            <form class="form" @submit="formSubmit">
                <view class="uni-form-item">
                    <view class="title" style="width:300rpx;">{{ $t('setting.originalPassword') }}：</view>
                    <input :password="!data.checked" class="uni-input" name="oldPassword"
                        :placeholder="$t('materials.pleaseEnterTheOldPassword')" />
                </view>
                <view class="uni-form-item">
                    <view class="title" style="width:300rpx;">{{ $t('setting.confirmPassword') }}：</view>
                    <input :password="!data.checked" class="uni-input" name="newPassword"
                        :placeholder="$t('materials.pleaseEnterANewPassword')" />
                </view>
                <view class="uni-form-item">
                    <view class="title" style="width:400rpx;">{{ $t('setting.passwordAgain') }}：</view>
                    <input :password="!data.checked" class="uni-input" name="nextPassword"
                        :placeholder="$t('materials.againPassword')" />
                </view>
                <view class="checkbox">
                    <checkbox-group @change="change">
                        <label>
                            <checkbox value="box" color="rgb(55, 136, 108)" :checked="data.checked" />
                            {{ $t('materials.phetherToDisplayPassword') }}
                        </label>
                    </checkbox-group>
                </view>
                <view class="page-bottom-boxtwo">
                    <button class="button" type="primary" form-type="submit">{{ $t("popup.confirm") }}</button>
                </view>
            </form>
        </template>
    </gui-page>
</template>

<script setup>
import {reLaunch} from '@/utils/routerSkip.js'
import { reactive, onMounted} from 'vue';
import { USERINFO } from '@/constant/index.js'
import { getCurrentUser, updateModifyPassword} from '@/api/api.js'

//引入国际化
import { useI18n } from 'vue-i18n';
const { t } = useI18n();

let data = reactive({
    userInfo: {},
    checked: false,
})
onMounted(() => {
    if (!uni.getStorageSync(USERINFO)) {
        requestData()
    } else {
        data.userInfo = uni.getStorageSync(USERINFO)
    }
    console.log(data.userInfo)
})
const requestData = async () => {
    let res = await getCurrentUser({})
    if (res) {
        data.userInfo = res
        uni.setStorageSync(USERINFO, data.userInfo);
    } else {
        uni.showToast({
            title: t('JsInternational.userInformationFailed'),
            icon: "none"
        });
    }
}
const change = (e) => {
    let { value } = e.detail
    data.checked = value.length ? true : false
}
const formSubmit = async (e) => {
    console.log(data.checked)
    let { newPassword, nextPassword, oldPassword } = e.detail.value
    if (!oldPassword.length) {
        uni.showToast({
            title: t('materials.pleaseEnterTheOldPassword'),
            icon: "none"
        });
        return
    }
    if (!newPassword.length) {
        uni.showToast({
            title: t('materials.pleaseEnterANewPassword'),
            icon: "none"
        });
        return
    }
    if (!nextPassword.length) {
        uni.showToast({
            title: t('materials.againPassword'),
            icon: "none"
        });
        return
    }
    if (nextPassword !== newPassword) {
        uni.showToast({
            title: t('materials.twoPasswordsAre'),
            icon: "none"
        });
        return
    }
    let parmes = {
        password: oldPassword,//原密码
        newpassword1: newPassword,//新密码
        newpassword2: newPassword,//新密码
        userNameId: data.userInfo.username,// 工号
    }
    let res = await updateModifyPassword(parmes)
    console.log(res)
    if (res.code == 0) {
        uni.showToast({
            title: t('materials.modifySuccessfully'),
            icon: "none",
            complete: () => {
                reLaunch({
                    url: '/pages/login/login'
                });
            }
        });
    } else {
        uni.showToast({
            title: res.message,
            icon: "none",
        });
    }
}
</script>

<style lang="less">
.form {
    margin: 20rpx;
    // background: #fff;
    border-radius: 10rpx;

    .uni-form-item {
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 24rpx;
        border: 1rpx solid #A5A5A5;
        background: #fff;
        box-shadow: 0rpx 0rpx 8rpx 0 #A5A5A5;
        border-radius: 10rpx;
        overflow: hidden;
        margin-bottom: 24rpx;
        font-size: 26rpx;

        .title {
            color: #333;
            width: 170rpx;
        }

        .uni-input {
            flex: 1;
            color: #333;
            font-size: 26rpx;
        }
    }

    .checkbox {
        margin-top: 30rpx;
        display: flex;
        color: #333;
        align-items: center;
        justify-content: flex-end;
    }
}

@media (prefers-color-scheme: dark) {
    .checkbox {
        color: #fff !important;
    }
}

.button {
    background-color: rgb(55, 136, 108) !important;
    width: 100%;
}
</style>
